<template>
  <view class="shopDetail">
    <view class="lunbo">
      <swiper class="screen-swiper" @change="intervalChange" :current="swIndex" circular :autoplay="true" :interval="5000" :duration="500" >
        <swiper-item v-for="(item,index) in goods_slider" :key="index">
          <view class="swiper-item">
            <image :src="getImgUrl(item)" mode="scaleToFill" />
          </view>
        </swiper-item> 
      </swiper>
      <view class="tabIndex">{{swIndex+1}}/{{goods_slider.length}}</view>
    </view>
    <view class="fanActive flex flex-align flex-end" v-if="return_coupon">
      <view class="right flex flex-align  flex-end" @click="opengiftdetail">
        <view class="one-omit">{{return_coupon[0].name}}×{{return_coupon[0].num}}…</view>
        <uni-icons type="right" size="15" color="#fff"></uni-icons>
      </view>
    </view>
    <view class="bgRadius detailTitle">
      <view class="title">{{goods_info.goods_name}}</view>
      <view class="miaoshu">{{goods_info.remark}}</view>
      <view class="biaoqian" v-if="goods_info.goods_tag">
        <uni-tag text="数码产品" custom-style="background-color: #FFE8DD; border-color: #FFE8DD; color: #FE7431;border-radius:30rpx;margin-right: 15rpx;"> </uni-tag>
        <uni-tag text="科技健身" custom-style="background-color: #FFE8DD; border-color: #FFE8DD; color: #FE7431;border-radius:30rpx;margin-right: 15rpx;"> </uni-tag>
      </view>
      <view class="priceNum flex flex-align flex-bt">
        <view class="left"><text v-if="goodTypeData?.id==1">￥</text>{{goods_info.price_selling}} <text  v-if="goodTypeData?.id!=1">{{ goodTypeData?.name }}</text></view>
        <view class="right flex flex-align">
          <view class="list">
            <view class="wenben">已售</view>
            <view class="num">{{goods_info.sales}}</view>
          </view>
          <!-- <view class="list">
            <view class="wenben">浏览</view>
            <view class="num">200</view>
          </view> -->
        </view>
      </view>
    </view>
    <view class="bgRadius guige flex flex-align flex-bt" @click="openGuige" v-if="goods_info.spec_type==1">
      <view class="left flex flex-align">
        <view class="wenben">已选</view>
        <view class="selectEd">{{selectInfo}}</view>
      </view>
      <view class="right"><uni-icons type="right" size="20" color="#333"></uni-icons></view>
    </view>
    <view class="bgRadius detailInfo">
      <view class="flex flex-center">
        <view class="homeTitle"><text>商品详情</text></view>
      </view>
      <view v-html="goods_info.content"></view>
      
    </view>
    <view style="height: 128rpx;"></view>
    <view class="goods-carts">
			<uni-goods-nav :options="options" :fill="true" :button-group="customButtonGroup" @click="onClick"
				@buttonClick="buttonClick" />
		</view>
    <selectGuige v-if="goods_info" ref="selectGuigeRef" :goodTypeData="goodTypeData" :shopInfo="goods_info" :shopItemInfo="shopItemInfo" @submit="selectSub"></selectGuige>
    <giftdetail ref="giftdetailRef" v-if="return_coupon" :dataInfo="return_coupon"></giftdetail>
    <uni-popup ref="alertDialog" type="dialog">
      <uni-popup-dialog type="success" cancelText="关闭" confirmText="确定" title="提示" :content="dialog" @confirm="dialogConfirm"
        ></uni-popup-dialog>
    </uni-popup>
  </view>
</template>

<script setup lang="ts">
import { getImgUrl, menuJump, wxShare } from '@/utils/tools'
import { computed, reactive, ref, unref, watch} from 'vue'
import selectGuige from './components/selectGuige.vue'
import giftdetail from './components/giftdetail.vue'
import { goodsInfo } from '@/api/login'
import { onLoad } from '@dcloudio/uni-app'
import { useAuthStore } from '@/stores/counter'
import { useRouter } from 'vue-router';
import { createOrder, orderPay, userAddress } from '@/api/user'
const router = useRouter();
onLoad((e:any) => {
  code.value = e.idcode
   getDetail()
   console.log(router)
})
const goods_info = ref<Recordable>({})
const orderStore = useAuthStore();
const goodTypeList = computed(() => orderStore.confige.currency); 
const alertDialog = ref()
const goodTypeData = ref<
  | {
      id: number;
      name: string;
      kind: string;
    }
  | undefined
>(undefined);
watch(goods_info, () => {
  if (goods_info.value.pay_currency_type_id) {
    goodTypeData.value = unref(goodTypeList).find((v: { id: any; }) => v.id === goods_info.value.pay_currency_type_id);
  }
}, { immediate: true });
const code = ref('')
const swIndex = ref(0)
const options= reactive([{
					icon: 'home',
					text: '首页'
				}]) 
const customButtonGroup=ref([{
  text: '立即购买',
  backgroundColor: 'linear-gradient(90deg, #FE7431, #FE7431)',
  color: '#fff'
}])
const shopItemInfo = ref<Recordable>({})
const selectInfo = ref('请选择')
const selectGuigeRef = ref<InstanceType<typeof selectGuige>>()
const return_coupon = ref([])
const dialog = ref('')
function intervalChange(e: any){
  swIndex.value = e.detail.current
}
const giftdetailRef = ref<InstanceType<typeof giftdetail>>()
const opengiftdetail = ()=>{
  giftdetailRef.value?.open()
}
function  onClick(e: { content: { text: any } }) {
  menuJump({is_tab: true,link: '/pages/index/index',link_type: 1})
}
function 	buttonClick(e: any) {
  if(goods_info.value.goods_type==2){
    dialog.value = '是否消耗'+goods_info.value.price_selling+goodTypeData.value?.name+'兑换'+goods_info.value.goods_cash+'现金红包吗？'
    alertDialog.value?.open()
  }else{
    selectGuigeRef.value?.open()
  }
}
async function dialogConfirm() {
  let data = {
    goods_id: goods_info.value.id,
    goods_item_id: goods_info.value.goods_specs_item[0].id,
    goods_num: 1,
  }
  let orderInfo = {
    order_id:'',
    currency: [
      {
        currency_id: goods_info.value.pay_currency_type_id,
        have_id: 1,
        amount: goods_info.value.price_selling,
        amount_to_cash: goods_info.value.price_selling,
      }
    ]
  }
  createOrder(data).then((res:any)=>{
    orderInfo.order_id = res.order_id
    orderPay(orderInfo).then((res:any)=>{
      uni.showToast({
        title: '兑换成功',
        icon: 'success',
        duration: 1000
      })
      setTimeout(() => {
        uni.redirectTo({
          url: '/pages/orderList/orderList?type=4',
        })
      }, 1000);
    })
  })
}
const selectSub = (value:any)=>{
  selectInfo.value = value
}
const openGuige = async ()=>{
  selectGuigeRef.value?.open()
}
// 商品详情
const goods_slider = ref([])

const getDetail = async ()=>{
  let res:any = await goodsInfo({id:code.value})
  goods_slider.value = res.goods_slider
  goods_info.value = res
  return_coupon.value = res.return_coupon
  if(res.spec_type==1){
    res.goods_specs_item.forEach((item:any)=>{
      unref(shopItemInfo)[item.goods_spec] = item
      if(item.goods_image==''){
        item.goods_image = res.goods_cover
      }
    })
  }
  if(goods_info.value.pay_currency_type_id!=1){
    customButtonGroup.value = [{
      text: '立即兑换',
      backgroundColor: 'linear-gradient(90deg, #FE7431, #FE7431)',
      color: '#fff'
    }]
  }
  wxShare({
    name: res.goods_name,
    cover: getImgUrl(res.goods_cover),
    code: code.value
  },2)
}
</script>

<style scoped lang="scss">
.shopDetail{padding-bottom: 10rpx;}
.lunbo{
  height: 750rpx;position: relative;
  width: 100%;
  .screen-swiper{
    height: 100%;
    width: 100%;
    min-height: 100% !important;
    image{
      width: 100%;
      height: 750rpx;
      border-radius: 10rpx;
    }
  }
  .tabIndex{position: absolute;bottom: 50rpx;right: 20rpx;background: rgba($color: #000000, $alpha: 0.5);color: #fff;padding: 6rpx 30rpx;border-radius: 40rpx;}
}
.fanActive{background: url('@/static/shop/shop01.png') no-repeat;background-size: 100% 100%;width: 100%;height: 120rpx;color: #fff;font-size: 26rpx;margin-top: -20rpx;position: relative;
  z-index: 11;box-sizing: border-box;padding-bottom: 20rpx;
  .right{padding-right: 20rpx;
    .one-omit{width: 400rpx;text-align: right;}
  }
}
.detailTitle{margin-top: -10rpx;position: relative;z-index: 90;
  .title{font-size: 36rpx;font-weight: bold;}
  .miaoshu{font-size: 28rpx;color: #969799;margin: 10rpx 0 20rpx;}
  .priceNum{margin-top: 40rpx;
    .left{font-size: 48rpx;color: #FE4927;font-weight: bold;
      text{font-size: 32rpx;}
    }
    .right{color: #969799;
      .list{width: 110rpx;text-align: center;border-right: 1px solid #F2F3F5;}
      .wenben{font-size: 24rpx;}
      .num{font-size: 28rpx;}
      .list:last-child{border-right: none;}
    }
  }
}


.guige{margin-top: 20rpx;padding:30rpx 20rpx;
  .left{font-size: 28rpx;
    .wenben{margin-right: 20rpx;}
   .selectEd{font-size: 28rpx;color: #969799;}
  }
  .right{font-size: 28rpx;}
}
.detailInfo{padding-top: 0;
  view{color: #646566;}
}

.goods-carts {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		position: fixed;
		left: 0;
		right: 0;
		/* #ifdef H5 */
		left: var(--window-left);
		right: var(--window-right);
		/* #endif */
		bottom: 0;
	}
</style>